<template>
    <view>
        <status-bar :title="pageData.title" statusHeight hideBg txtColor></status-bar>
        <view class="rows p-re">
            <image :src="$online('bg.png')" mode="widthFix" class="rows"></image>
            <view class="info d-flex j-sb a-center">
                <view class="d-flex a-center">
                    <image :src="$imgUrls(pageData.head_img)" mode="aspectFill" class="headImg"></image>
                    <view class="d-flex f-column m-left20">
                        <text class="white size28">{{ pageData.name }}</text>
                        <text class="white h6 m-top12">{{ pageData.phone }}</text>
                    </view>
                </view>
                <view class="iconfont icon-server white size54" @click="call()"></view>
            </view>
        </view>

        <view class="stay">
            <view class="Code flexac" @click="extendBtn">
                <image :src="$online('code.png')" mode="aspectFill" class="code_Img"></image>
            </view>
            <view class="d-flex f-column">
                <text class="black size32 bold">待安装 (单)</text>
                <text class="color_2D size40 m-top20">{{ pageData.toBeInstalled }}</text>
            </view>
            <view class="row j-sb m-top30">
                <view class="d-flex f-column">
                    <text class="black size28">累计安装费 ({{ nameDefinition.profitUnit }})</text>
                    <text class="color_2D size40 m-top20">{{ pageData.allMoney }}</text>
                </view>
                <view class="d-flex f-column" @click="toUrl('/moneyPage/capital/withdraw')">
                    <view class="d-flex a-center">
                        <text class="black size28 m-right10">可提现 ({{ nameDefinition.profitUnit }})</text>
                        <view class="iconfont icon-a-zujian32 h6 color_99"></view>
                    </view>
                    <text class="color_2D size40 m-top20">{{ pageData.income }}</text>
                </view>
            </view>
        </view>

        <view class="viewbox auto d-flex f-wrap m-top50">
            <view class="w-25 d-flex f-column a-center m-top40" @click="toUrl('orders')">
                <image :src="$online('a1.jpg')" mode="aspectFill" class="anine"></image>
                <text class="size28 color_33 m-top10">全部派单</text>
            </view>
            <view class="w-25 d-flex f-column a-center m-top40" @click="toUrl('/moneyPage/capital/brokerage_list')">
                <image :src="$online('a2.jpg')" mode="aspectFill" class="anine"></image>
                <text class="size28 color_33 m-top10">收益明细</text>
            </view>
            <view class="w-25 d-flex f-column a-center m-top40" @click="toUrl('/moneyPage/capital/addBank')">
                <image :src="$online('a3.jpg')" mode="aspectFill" class="anine"></image>
                <text class="size28 color_33 m-top10">银行卡管理</text>
            </view>
            <view class="w-25 d-flex f-column a-center m-top40" @click="toUrl('/privatePage/single/goodsShare')">
                <image :src="$online('a4.jpg')" mode="aspectFill" class="anine"></image>
                <text class="size28 color_33 m-top10">商品分享</text>
            </view>
            <view class="w-25 d-flex f-column a-center m-top40" @click="extendBtn">
                <image :src="$online('a5.jpg')" mode="aspectFill" class="anine"></image>
                <text class="size28 color_33 m-top10">推广名片</text>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                pageData: ''
            };
        },
        onLoad() {
            this.apiStaffInfo();
        },
        methods: {
            apiStaffInfo() {
                this.$http
                    .post({
                        url: '/dispatch/apiStaffInfo'
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg, 2);
                        this.pageData = res.data;
                    });
            },
            extendBtn() {
                this.toUrl(`extend?pageData=${JSON.stringify(this.pageData)}`);
            }
        },
        computed: {
            ...mapState(['startUp', 'nameDefinition', 'share'])
        },
        onShareAppMessage() {
            return {
                title: this.share.title,
                desc: this.share.desc,
                path: `/pages/index/index?share_v_id=${this.vid}`,
                imageUrl: `${this.share.imageUrl}`
            };
        }
    };
</script>

<style lang="scss" scoped>
    .info {
        width: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;
        position: absolute;
        top: 180rpx;
        left: 0;
        z-index: 10;
    }
    .headImg {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
    }
    .stay {
        width: 690rpx;
        background-color: #fff;
        margin: -140rpx auto 0 auto;
        box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(0, 0, 0, 0.1);
        border-radius: 6rpx;
        padding: 20rpx;
        position: relative;
        z-index: 200;
    }
    .Code {
        width: 88rpx;
        height: 80rpx;
        background: #2d77ff;
        border-radius: 0rpx 0rpx 8rpx 8rpx;
        position: absolute;
        top: 0;
        right: 20rpx;
    }
    .code_Img {
        width: 40rpx;
        height: 40rpx;
    }
    .anine {
        width: 88rpx;
        height: 80rpx;
        border-radius: 6rpx;
    }
</style>
